<template>
  <div class="dialog">
    <!-- 络筒弹窗控件 -->
    <el-dialog
      width="60%"
      :visible.sync="Dialog"
      @close="closeDialog"
      append-to-body
      :close-on-click-modal="false"
      destroy-on-close
    >
      <div slot="title" class="clearfix">
        <div class="title">
          <img class="title_img" src="../../../../../assets/img/icon.png" alt="" srcset="" />
          <span class="title_left">{{ title_l }}</span>
        </div>
        <span class="title_top">{{ title }}</span>
      </div>
      <el-row>
        <el-col :span="12">
          <div class="row1" style="width: 40%">
            <span class="row1title">整车状态</span>
            <span class="row1value" :style="{ color: getHeadColor(info.stateCode) }">
              {{ getHeadName(info.stateCode) }}
            </span>
          </div>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>品种：</span>
                    <span class="title_value">{{ !info.pz ? data.pz : info.pz }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>总产(米)：</span>
                    <span class="title_value">{{ !info.zcd || info.zcd == "None" ? 0 : info.zcd }}米</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当班长度(米)：</span>
                    <span class="title_value">{{ !info.a_zcd || info.a_zcd == "None" ? 0 : info.a_zcd }}米</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当前班产(KG)：</span>
                    <span class="title_value">
                      {{ !info.dqsjcl || info.dqsjcl == "None" ? 0 : Number(info.dqsjcl).toFixed(2) }}KG
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当前理论班产(KG)：</span>
                    <span class="title_value">
                      {{ !info.dqllcl || info.dqllcl == "None" ? 0 : Number(info.dqllcl).toFixed(2) }}KG
                    </span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>当前长度(米)：</span>
                    <span class="title_value">{{ !info.dqcd || info.dqcd == "None" ? 0 : info.dqcd }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>满管长度(米)：</span>
                    <span class="title_value">{{ !info.dclscd || info.dclscd == "None" ? 0 : info.dclscd }}</span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>罗拉转速(转/分)：</span>
                    <span class="title_value">{{ !info.llzs || info.llzs == "None" ? 0 : info.llzs }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>锭子转速(转/分)：</span>
                    <span class="title_value">{{ !info.dzzs || info.dzzs == "None" ? 0 : info.dzzs }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>捻度(转/米)：</span>
                    <span class="title_value">{{ !info.yznd || info.yznd == "None" ? 0 : info.yznd }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>设定捻度(转/米)：</span>
                    <span class="title_value">{{ !info.sdnd || info.sdnd == "None" ? 0 : info.sdnd }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>运转锭速状态：</span>
                    <span class="title_value">{{ !info.yzdslx || info.yzdslx == "None" ? 0 : info.yzdslx }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>捻度偏差状况：</span>
                    <span class="title_value">{{ !info.ndpczk || info.ndpczk == "None" ? 0 : info.ndpczk }}</span>
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="title_item">
                    <span>挡车工：</span>
                    <span class="title_value" v-html="splitName(info.dcg)"></span>
                  </div>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <!-- echart -->
        <el-col :span="12">
          <el-row type="flex" justify="center" class="radio-group">
            <el-radio v-model="radio" label="1">仪表盘数据</el-radio>
            <el-radio v-model="radio" label="2">折线图数据</el-radio>
          </el-row>
          <div v-if="radio == '1'" class="echarts_line">
            <div ref="line" style="width: 100%; height: 100%"></div>
          </div>
          <el-row v-if="radio == '1'">
            <el-col :span="12">
              <div class="echarts">
                <div ref="lulotongEcharts1" style="width: 100%; height: 100%"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="echarts">
                <div ref="lulotongEcharts2" style="width: 100%; height: 100%"></div>
              </div>
            </el-col>
            <el-col :span="24"></el-col>
          </el-row>
          <div v-if="radio == '2'">
            <div ref="lineEchart" style="width: 100%; height: 250px" element-loading-background="transparent"></div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="10">
        <el-col :span="14">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/zjgh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="tableData" style="width: 100%" height="150" size="mini">
              <el-table-column prop="code" label="专件编码"></el-table-column>
              <el-table-column prop="desc" label="专件描述"></el-table-column>
              <el-table-column prop="date" label="上车时间" width="160px"></el-table-column>
              <el-table-column prop="num" label="数量"></el-table-column>
              <el-table-column prop="day" label="剩余天数"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
        <el-col :span="10">
          <el-row style="margin-top: 10px">
            <img src="../../../../../assets/img/whjh.svg" alt="" srcset="" />
          </el-row>
          <el-row>
            <el-table border :data="table1Data" style="width: 100%" height="150" size="mini">
              <el-table-column prop="whlx" label="维护类型" width="120px"></el-table-column>
              <el-table-column prop="dqjh" label="当前计划" width="160px"></el-table-column>
              <el-table-column prop="sfwc" label="是否完成"></el-table-column>
              <el-table-column prop="xcjh" label="下次计划" width="160px"></el-table-column>
            </el-table>
          </el-row>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "dialog_xisha",
  data() {
    return {
      radio: "1",
      Dialog: false,
      title: "",
      title_l: "",
      // 弹窗信息
      info: {
        pz: ""
      },
      llxs: 0,
      xiaoLv: 0,
      data: "",
      lineData: {
        time: [],
        speed: [],
        i: []
      },
      status: {
        state1: 0,
        state2: 0,
        state3: 0,
        state4: 0,
        state5: 0
      },
      loading: false,
      tableData: [
        {
          code: "ZK101",
          desc: "细纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },
        {
          code: "ZK102",
          desc: "细纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK103",
          desc: "细纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        },

        {
          code: "ZK104",
          desc: "细纱",
          date: "2021-08-03 15:20:06",
          num: 100,
          day: 5
        }
      ],
      table1Data: [
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        },
        {
          whlx: "保养及维护",
          dqjh: "2021-07-31",
          sfwc: "否",
          xcjh: "2021-07-31"
        }
      ]
    };
  },
  mounted() {},
  computed: {
    xiShaNewestState() {
      return this.$store.state.xiShaNewestState;
    },
    xiShaLineState() {
      return this.$store.state.xiShaLineState;
    }
  },
  watch: {
    xiShaNewestState: {
      immediate: true,
      handler(val) {
        if (val.data) {
          this.info = val.data;
          this.llxs = parseInt(val.data.llxs) / 100;
          this.xiaoLv = (val.data.runTime / val.data.totalTime) * 100;
          this.$nextTick(() => {
            this.init1();
            this.init2();
            this.init3();
          });
        } else {
          this.info = {
            pz: "",
            llxs: 0
          };
          this.llxs = 0;
          this.xiaoLv = 0;
          this.$nextTick(() => {
            this.init1();
            this.init2();
            this.init3();
          });
        }
      }
    },
    xiShaLineState: {
      immediate: true,
      handler(val) {
        if (val.data) {
          let time = [],
            speed = [],
            iavg = [];
          val.data.map((item) => {
            let timeParams = item.time.split(" ")[1];
            time.push(timeParams);
            speed.push(parseInt(item.llxs) / 100);
            iavg.push(item.iavg);
          });
          this.lineData = {
            time: time,
            speed: speed,
            i: iavg
          };
          this.$nextTick(() => {
            this.init4();
            this.loading = false;
          });
        }
      }
    },
    radio: {
      immediate: true,
      handler(val) {
        if (val == "1") {
          this.$nextTick(() => {
            this.init1();
            this.init2();
            this.init3();
          });
        } else {
          this.$nextTick(() => {
            this.init4();
          });
        }
      }
    }
  },
  methods: {
    //尾灯表示车台状态(运行、停止、故障、满纱满桶、通讯失败)
    getHeadColor(status) {
      switch (parseInt(status)) {
        //运行
        case 1:
          return "#02DE6D";
        //停止
        case 2:
          return "#FF3C00";
        //故障
        case 3:
          return "#FF9902";
        //满纱满桶
        case 4:
          return "#00D8D3";
        //通讯失败
        case 5:
          return "#B8B8B8";
        // 计划停台
        case 6:
          return "rgb(255,233,34)";
      }
    },
    getHeadName(stateCode) {
      switch (parseInt(stateCode)) {
        //运行
        case 1:
          return "运行";
        //停止
        case 2:
          return "停止";
        //故障
        case 3:
          return "故障";
        //满纱满桶
        case 4:
          return "满纱满桶";
        //通讯失败
        case 5:
          return "通讯故障";
        // 计划停台
        case 6:
          return "计划停台";
        default:
          return "通讯故障";
      }
    },
    closeDialog() {
      this.radio = null;
      this.$parent.closeHandle("secXiShaTimer");
      this.info = {
        pz: "",
        llxs: 0
      };
      this.llxs = 0;
      this.xiaoLv = 0;
    },
    showDialog(data) {
      this.data = data;
      this.title_l = "细纱" + data.devSn;
      this.title = data.devSn + "号细纱DTM129 详情";
      this.loading = true;
      this.Dialog = true;
      this.radio = "1";
    },
    splitName(val) {
      if (val) {
        let arr = val.split(" ");
        arr = arr.filter((item) => {
          return item && item !== " ";
        });
        arr = arr.join("<br>");
        return arr;
      } else {
        return "";
      }
    },
    init1() {
      if (this.$refs.lulotongEcharts1) {
        var lulotongEcharts1 = this.$echarts.init(this.$refs.lulotongEcharts1);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 35,
              itemStyle: {
                color: "#58D9F9",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 22,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return value.toFixed(2) + "m/min";
                }
              },
              data: [
                {
                  name: "罗拉线速",
                  value: this.llxs ? this.llxs : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts1.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts1.resize();
        });
      }
    },
    init2() {
      if (this.$refs.lulotongEcharts2) {
        var lulotongEcharts2 = this.$echarts.init(this.$refs.lulotongEcharts2);
        var option = {
          series: [
            {
              type: "gauge",

              center: ["50%", "50%"],
              radius: "90%",
              min: 0,
              max: 100,
              itemStyle: {
                color: "rgb(128,246,217)",
                shadowColor: "rgba(0,138,255,0.45)",
                shadowBlur: 10,
                shadowOffsetX: 2,
                shadowOffsetY: 2
              },
              axisLine: {
                roundCap: true,
                lineStyle: {
                  width: 15,
                  color: [[1, "#1D3E52"]]
                }
              },

              progress: {
                roundCap: true,
                show: true,
                width: 18
              },

              axisTick: {
                show: true
              },
              splitLine: {
                show: false,
                length: 15
              },

              axisLabel: {
                distance: 5,
                color: "#62C6F3",
                fontSize: 9
              },
              anchor: {
                show: false
              },

              title: {
                offsetCenter: [0, "85%"],
                fontSize: 20,
                color: "#58D9F9"
              },
              detail: {
                valueAnimation: true,
                fontSize: 28,
                fontFamily: "electronicFont",
                offsetCenter: [0, "60%"],
                color: "rgb(241,241,64)",
                formatter: function(value) {
                  return Math.round(value) + "%";
                }
              },

              data: [
                {
                  name: "效率",
                  value: this.xiaoLv ? this.xiaoLv : 0
                }
              ]
            }
          ]
        };

        lulotongEcharts2.setOption(option);
        window.addEventListener("resize", function() {
          lulotongEcharts2.resize();
        });
      }
    },
    init3() {
      if (this.$refs.line) {
        var line = this.$echarts.init(this.$refs.line);
        var category = [
          {
            name: "剩余长度",
            value: this.info.dclscd - this.info.dqcd
          }
        ]; // 类别
        var total = 8000; // 数据总数
        var datas = [];
        category.forEach((value) => {
          datas.push(value.value);
        });
        var option = {
          xAxis: {
            max: total,
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          grid: {
            left: 90,
            top: 10, // 设置条形图的边距
            right: 90,
            bottom: 10
          },
          yAxis: [
            {
              type: "category",
              inverse: false,
              data: category,
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              }
            }
          ],
          series: [
            {
              // 内
              type: "bar",
              barWidth: 18,
              legendHoverLink: false,
              silent: false,
              itemStyle: {
                normal: {
                  color: function(params) {
                    var color;
                    color = {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#56ab2f" // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#a8e063" // 100% 处的颜色
                        }
                      ]
                    };
                    return color;
                  }
                }
              },
              label: {
                normal: {
                  show: true,
                  position: "left",
                  formatter: "{b}",
                  textStyle: {
                    color: "#00C4FF",
                    fontSize: 16,
                    fontWeight: 500
                  }
                }
              },
              data: category,
              z: 1,
              animationEasing: "elasticOut"
            },
            {
              // 分隔
              type: "pictorialBar",
              itemStyle: {
                normal: {
                  color: "#061348"
                }
              },
              symbolRepeat: "fixed",
              symbolMargin: 6,
              symbol: "rect",
              symbolClip: true,
              symbolSize: [1, 21],
              symbolPosition: "start",
              symbolOffset: [1, -1],
              symbolBoundingData: this.total,
              data: category,
              z: 2,
              animationEasing: "elasticOut"
            },
            {
              // 外边框
              type: "pictorialBar",
              symbol: "rect",
              symbolBoundingData: total,
              itemStyle: {
                normal: {
                  color: "none"
                }
              },
              label: {
                normal: {
                  formatter: (params) => {
                    var text;
                    if (params.dataIndex == 1) {
                      text = "{f|  " + params.data + "米}";
                    } else if (params.dataIndex == 2) {
                      text = "{f|  " + params.data + "米}";
                    } else if (params.dataIndex == 3) {
                      text = "{f|  " + params.data + "米}";
                    } else {
                      text = "{f|  " + params.data + "米}";
                    }
                    return text;
                  },
                  rich: {
                    f: {
                      color: "#ffffff",
                      fontFamily: "PangMenZhengDao",
                      fontSize: 20,
                      fontWeight: 800
                    }
                  },
                  position: "right",
                  distance: 0, // 向右偏移位置
                  show: true
                }
              },
              data: datas,
              z: 0,
              animationEasing: "elasticOut"
            },
            {
              name: "外框",
              type: "bar",
              barGap: "-120%", // 设置外框粗细
              data: [
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total,
                total
              ],
              barWidth: 25,
              itemStyle: {
                normal: {
                  color: "transparent", // 填充色
                  barBorderColor: "#1C4B8E", // 边框色
                  barBorderWidth: 1, // 边框宽度
                  // barBorderRadius: 0, //圆角半径
                  label: {
                    // 标签显示位置
                    show: false,
                    position: "top" // insideTop 或者横向的 insideLeft
                  }
                }
              },
              z: 0
            }
          ]
        };

        line.setOption(option);
        window.addEventListener("resize", function() {
          line.resize();
        });
      }
    },
    init4() {
      if (this.$refs.lineEchart) {
        var lineEchart = this.$echarts.init(this.$refs.lineEchart);
        let speedMax = 30;
        let iMax = 30;
        let option = {
          tooltip: {
            trigger: "axis",
            textStyle: {
              color: "#fff",
              fontSize: 13
            },
            padding: 10,
            backgroundColor: "rgba(66, 66, 89, 0.8)",
            formatter: function(params) {
              var result =
                '<div style="font-size:14px;font-weight:600;margin-bottom:4px">' + params[0].axisValue + "</div>";
              params.forEach(function(item, index) {
                result +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
                  item.color +
                  '"></span>';
                result += item.seriesName + "：" + item.data;
                let unit = item.seriesName == "罗拉线速度" ? "M/min" : "A";
                result += unit + "<br>";
              });
              return result;
            }
          },
          legend: {
            top: 10,
            left: "center",
            data: ["罗拉线速度", "电流"],
            icon: "circle",
            textStyle: {
              color: "#fff"
            }
          },
          grid: {
            left: 30,
            right: "2%",
            bottom: 0,
            containLabel: true
          },
          xAxis: {
            type: "category",
            boundaryGap: true,
            data: this.lineData.time,
            axisTick: {
              show: false
            },
            axisLabel: {
              color: "rgb(121,203,250)",
              fontSize: 13
            },
            axisLine: {
              lineStyle: { color: "rgb(121,203,250)" }
            }
          },
          yAxis: [
            {
              name: "单位：(M/min)",
              nameTextStyle: {
                color: "rgb(121,203,250)"
              },
              type: "value",
              min: 0,
              max: speedMax,
              splitNumber: 5,
              interval: speedMax / 5,
              axisTick: { show: false },
              axisLine: { show: false },
              axisLabel: {
                show: true,
                fontSize: 13,
                textStyle: {
                  color: "rgb(121,203,250)"
                }
              },
              splitLine: {
                lineStyle: {
                  color: "rgb(121,203,250,0.5)",
                  type: "dotted"
                }
              }
            },
            {
              name: "单位：(A)",
              nameTextStyle: {
                color: "rgb(121,203,250)"
              },
              type: "value",
              min: 0,
              max: iMax,
              splitNumber: 5,
              interval: iMax / 5,
              nameLocation: "end",
              axisLine: { show: false },
              axisTick: { show: false },
              splitLine: { show: false },
              axisLabel: {
                show: true,
                fontSize: 13,
                textStyle: {
                  color: "rgb(121,203,250)"
                }
              }
            }
          ],
          series: [
            {
              name: "罗拉线速度",
              color: "rgb(153,247,122)",
              type: "line",
              yAxisIndex: 0,
              symbol: "none",
              data: this.lineData.speed,
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(153,247,122,0.5)"
                    },
                    {
                      offset: 1,
                      color: "rgba(153,247,122,0)"
                    }
                  ],
                  global: false
                }
              }
            },
            {
              name: "电流",
              color: "rgb(244,182,63)",
              type: "line",
              yAxisIndex: 1,
              symbol: "none",
              data: this.lineData.i,
              areaStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(244,182,63,0.5)"
                    },
                    {
                      offset: 1,
                      color: "rgba(244,182,63,0)"
                    }
                  ],
                  global: false
                }
              }
            }
          ]
        };
        lineEchart.setOption(option);
        window.addEventListener("resize", function() {
          lineEchart.resize();
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
.echarts {
  width: 100%;
  height: 200px;
}
.title {
  color: rgb(111, 155, 184);
}
</style>
